<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <script src="js/vue@2.7.10.js"></script>
    <script src="/element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <style>
        .top {
            height: 50px;
            width: 100%;
            position: relative;
        }

        .top input {
            display: inline-block;
            width: 200px;
            height: 30px;
        }

        .top .addBtn {
            position: absolute;
            right: 10px;
            top: 10px;
        }

        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">
    <template>
        <div class="top">
            <el-input
                    @change="searchByValue"
                    v-model="search"
                    size="medium"
                    placeholder="输入关键字搜索">
            </el-input>
        </div>

        <el-table
                :data="tableData"
                :row-class-name="tableRowClassName"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="id"
                    label="编号"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="联系电话"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="email"
                    label="邮箱"
                    width="200">
            </el-table-column>

            <el-table-column
                    prop="createdAt"
                    label="注册日期"
                    width="'*'">
            </el-table-column>
            <!-- 如果有时间 这里可以展示用户的累计消费 消费习惯等细节 当然 要给user加一张表，存储用户画像 -->
        </el-table>
    </template>
</div>
</body>

<script>
    new Vue({
        el: "#app",
        mounted() {
            this.init();

        },

        methods: {
            init() {
                axios.get('/user').then(res => {
                    if (res.data.code === 1) {
                        this.tableData = res.data.data;
                        this.tableData_copy = res.data.data;
                    }
                });
            },
            searchByValue(value) {
                console.log(value)
                this.tableData = this.tableData_copy.filter(item => {
                    const searchString = this.search.toLowerCase();
                    return !this.search
                        || item.name.toLowerCase().includes(searchString)
                        || item.email?.toLowerCase().includes(searchString)
                        || item.phone?.includes(searchString)
                        || item.id.toString() === searchString
                });
            },

            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 4 === 0) {
                    return 'warning-row';
                } else if (rowIndex % 2 === 0) {
                    return 'success-row';
                } else {
                    return '';
                }
            }
        },

        data: function () {
            return {
                search: '',
                tableData: [],
                // 数据备份 tableData可能因为搜索功能要改变值，所以要备份一份
                tableData_copy: [],
                form: {},
            }
        }
    })
</script>
</html>